import styles from './indes.module.scss'
import cm from 'classnames'

const Index = props => {
  const { width = 20, strokeWidth = 1, className } = props

  const circumference = 2 * Math.PI * width
  const dashArray = `${circumference * 0.1} ${circumference}`
  const dashArray2 = `${circumference * 0.45} ${circumference}`
  const offset0 = `${-circumference * 0.175}`
  const offset1 = `${-circumference * 0.625}`
  return (
    <svg viewBox={`0 0 ${width * 2} ${width * 2}`} className={cm(styles.svg, className)} width={width * 2}>
      <circle
        cx={width}
        cy={width}
        r={width - 2}
        strokeWidth={strokeWidth}
        style={{ '--oneDash': dashArray, '--twoDash': dashArray2, '--oneOff': offset0, '--twoOff': offset1 }}
      ></circle>
    </svg>
  )
}

export default Index
